/*
 * @Author: whq
 * @Date: 2024-12-28 16:49:53
 * @LastEditTime: 2024-12-28 16:50:22
 * @LastEditors: whq
 * @Description: 
 * @FilePath: \myreactdemo1\src\components\base\nav\index.jsx
 */
import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { routes } from '../../routes';
import './index.css';

const Nav = () => {
    let navigate = useNavigate();
    let location = useLocation();
    const handleChangeRoute = (url) => {
        navigate(url);
    };

    return (
        <div className='nav-container'>
            {routes.map((each, index) => (
                <div
                    className={`link_btn ${location.pathname === each.url && 'link_btn--active'}`}
                    onClick={() => handleChangeRoute(each.url)}
                    key={'link' + index}
                >
                    {each.title}
                </div>
            ))}
        </div>
    );
};

export default Nav;